<template>
  <div class="bazijp-gen">
    <div class="bazijp-gen__header">
      <!-- <div class="title-section">
        <h1 class="main-title">{{ selectTimeInfo.userName }}的八字精批</h1>
      </div> -->
      <h2>{{ selectTimeInfo.userName }}的八字精批</h2>
      <!-- <ul class="bazi">
        <li v-if="textVisibleObject.yearTextVisible">
          <dl>
            <dt>年</dt>
            <dd>{{ selectTimeInfo.TianGanDiZhiYear }}</dd>
          </dl>
        </li>
        <li v-if="textVisibleObject.monthTextVisible">
          <dl>
            <dt>月</dt>
            <dd>{{ selectTimeInfo.TianGanDiZhiMonth }}</dd>
          </dl>
        </li>
        <li v-if="textVisibleObject.dayTextVisible">
          <dl>
            <dt>日</dt>
            <dd>{{ selectTimeInfo.TianGanDiZhiDay }}</dd>
          </dl>
        </li>
        <li v-if="textVisibleObject.hourTextVisible">
          <dl>
            <dt>时</dt>
            <dd>
              {{
                calculateHourBranch(
                  calculateDayBranch(
                    selectTimeInfo.year,
                    selectTimeInfo.month,
                    selectTimeInfo.day
                  ),
                  selectTimeInfo.hour
                )
              }}
            </dd>
          </dl>
        </li>
      </ul> -->
    </div>
    <div class="bazijp-gen__pan" v-if="bazijpGenPanVisible">
      <div class="bazi-pan">
        <ul
          class="bazi-pan__zhi"
          :style="{ transform: 'rotate(' + secondDeg + 'deg)' }"
          ref="bazi_pan_ref"
        >
          <li
            class="pan__zhi_1"
            style="
              --bgcolor: #ffebac;
              top: 0.4689rem;
              left: 5.3915rem;
              transform: rotate(0deg);
            "
          >
            子
          </li>
          <li
            class="pan__zhi_2"
            style="
              --bgcolor: #ffebac;
              top: 1.1284rem;
              left: 7.8528rem;
              transform: rotate(30deg);
            "
          >
            丑
          </li>
          <li
            class="pan__zhi_3"
            style="
              --bgcolor: #ffebac;
              top: 2.9302rem;
              left: 9.6546rem;
              transform: rotate(60deg);
            "
          >
            寅
          </li>
          <li
            class="pan__zhi_4"
            style="
              --bgcolor: #ffebac;
              top: 5.3915rem;
              left: 10.3141rem;
              transform: rotate(90deg);
            "
          >
            卯
          </li>
          <li
            class="pan__zhi_5"
            style="
              --bgcolor: #ffebac;
              top: 7.8528rem;
              left: 9.6546rem;
              transform: rotate(120deg);
            "
          >
            辰
          </li>
          <li
            class="pan__zhi_6"
            style="
              --bgcolor: #ffebac;
              top: 9.6546rem;
              left: 7.8528rem;
              transform: rotate(150deg);
            "
          >
            巳
          </li>
          <li
            class="pan__zhi_7"
            style="
              --bgcolor: #ffebac;
              top: 10.3141rem;
              left: 5.3915rem;
              transform: rotate(180deg);
            "
          >
            午
          </li>
          <li
            class="pan__zhi_8"
            style="
              --bgcolor: #ffebac;
              top: 9.6546rem;
              left: 2.9302rem;
              transform: rotate(210deg);
            "
          >
            未
          </li>
          <li
            class="pan__zhi_9"
            style="
              --bgcolor: #ffebac;
              top: 7.8528rem;
              left: 1.1284rem;
              transform: rotate(240deg);
            "
          >
            申
          </li>
          <li
            class="pan__zhi_10"
            style="
              --bgcolor: #ffebac;
              top: 5.3915rem;
              left: 0.4689rem;
              transform: rotate(270deg);
            "
          >
            酉
          </li>
          <li
            class="pan__zhi_11"
            style="
              --bgcolor: #ffebac;
              top: 2.9302rem;
              left: 1.1284rem;
              transform: rotate(300deg);
            "
          >
            戌
          </li>
          <li
            class="pan__zhi_12"
            style="
              --bgcolor: #ffebac;
              top: 1.1284rem;
              left: 2.9302rem;
              transform: rotate(330deg);
            "
          >
            亥
          </li>
        </ul>
        <ul
          class="bazi-pan__gan"
          :style="{ transform: 'rotate(' + firstDeg + 'deg)' }"
          ref="bazi_pan_gan_ref"
        >
          <li
            class="pan__gan1"
            style="
              --bgcolor: #ffebac;
              top: 2.813rem;
              left: 5.3915rem;
              transform: rotate(0deg);
            "
          >
            甲
          </li>
          <li
            class="pan__gan2"
            style="
              --bgcolor: #ffebac;
              top: 3.30545rem;
              left: 6.9071rem;
              transform: rotate(36deg);
            "
          >
            乙
          </li>
          <li
            class="pan__gan3"
            style="
              --bgcolor: #ffebac;
              top: 4.5947rem;
              left: 7.8438rem;
              transform: rotate(72deg);
            "
          >
            丙
          </li>
          <li
            class="pan__gan4"
            style="
              --bgcolor: #ffebac;
              top: 6.1883rem;
              left: 7.8438rem;
              transform: rotate(108deg);
            "
          >
            丁
          </li>
          <li
            class="pan__gan5"
            style="
              --bgcolor: #ffebac;
              top: 7.47755rem;
              left: 6.9071rem;
              transform: rotate(144deg);
            "
          >
            戊
          </li>
          <li
            class="pan__gan6"
            style="
              --bgcolor: #ffebac;
              top: 7.97rem;
              left: 5.3915rem;
              transform: rotate(180deg);
            "
          >
            己
          </li>
          <li
            class="pan__gan7"
            style="
              --bgcolor: #ffebac;
              top: 7.47755rem;
              left: 3.8759rem;
              transform: rotate(216deg);
            "
          >
            庚
          </li>
          <li
            class="pan__gan8"
            style="
              --bgcolor: #ffebac;
              top: 6.1883rem;
              left: 2.9392rem;
              transform: rotate(252deg);
            "
          >
            辛
          </li>
          <li
            class="pan__gan9"
            style="
              --bgcolor: #ffebac;
              top: 4.5947rem;
              left: 2.9392rem;
              transform: rotate(288deg);
            "
          >
            壬
          </li>
          <li
            class="pan__gan10"
            style="
              --bgcolor: #ffebac;
              top: 3.30545rem;
              left: 3.8759rem;
              transform: rotate(324deg);
            "
          >
            癸
          </li>
        </ul>
      </div>
    </div>
    <div class="bazijp-gen__contents" v-show="analysisAfter">
      <div class="bazijp-gen__progress">
        <div data-v-b6f80aa6="" class="three-part">
          <div data-v-b6f80aa6="" class="three-part__heading">
            <img
              data-v-b6f80aa6=""
              src="../assets/pic/basic_top.png"
              width="100%"
            /><!---->
            <img
              v-if="false"
              data-v-b6f80aa6=""
              src="../assets/pic/progress_center.png"
              width="100%"
            />
            <img
              v-if="false"
              data-v-b6f80aa6=""
              src="../assets/pic/basic_center.png"
              width="100%"
            />
          </div>

          <div
            data-v-b6f80aa6=""
            class="three-part__content padding-h-xl padding-v-xl"
            style="
              background-image: url('https://hpay.yqiaoart.top/assets/progress_center.png');
            "
          >
            <div class="tab-progress" data-v-b6f80aa6="">
              <div class="tab-progress__tabs">
                <ul ref="progress__tabs_ref">
                  <li
                    class="active"
                    style="color: rgb(255, 235, 172)"
                    ref="progress__tabs_item1"
                  >
                    基础命理<u style="background-color: rgb(255, 235, 172)"></u>
                  </li>
                  <li
                    class=""
                    style="color: rgb(255, 235, 172)"
                    ref="progress__tabs_item2"
                  >
                    运势走向<u style="background-color: rgb(255, 235, 172)"></u>
                  </li>
                  <li
                    class=""
                    style="color: rgb(255, 235, 172)"
                    ref="progress__tabs_item3"
                  >
                    运势指导<u style="background-color: rgb(255, 235, 172)"></u>
                  </li>
                </ul>
              </div>
              <div class="tab-progress__items" v-if="analysisInfoVisible1">
                <ul>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在录入你的出生年月日时信息</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <!-- <i style="width: 0%; background-color: rgb(255, 235, 172);" ref="progress_i1_ref"></i> -->
                      <i
                        :style="{
                          width: progress1 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在分析你的八字组合与五行属性</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress2 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在解读你的命理基础特质</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress3 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="tab-progress__items" v-if="analysisInfoVisible2">
                <ul>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在检测你近期的运势变化</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress4 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在分析你的大运流年运势</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress5 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在预测未来一年的吉凶趋势</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress6 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="tab-progress__items" v-if="analysisInfoVisible3">
                <ul>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在分析你的 2025 流年运势、流月运势</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress7 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在分析适合你的事业财运方向</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress8 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                  <li>
                    <strong style="color: rgb(255, 235, 172)"
                      >正在生成你的 2025 年运势指导报告</strong
                    >
                    <div
                      class="tab-progress__bar"
                      style="background-color: rgb(41, 44, 68)"
                    >
                      <i
                        :style="{
                          width: progress9 + '%',
                          backgroundColor: 'rgb(255, 235, 172)',
                        }"
                      ></i>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <img
            data-v-b6f80aa6=""
            src="../assets/pic/progress_bottom.png"
            width="100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watchEffect } from "vue";
import axios from "axios";
import calendar from "js-calendar-converter";
import router from "@/router";
import { useRoute } from "vue-router";
import request from "@/utils/request";

const route = useRoute(); // 获取当前路由信息
const selectTimeInfo = ref({});

const firstDeg = ref(0);
const secondDeg = ref(0);

const progress__tabs_ref = ref(null);

const analysisInfoVisible1 = ref(true);
const analysisInfoVisible2 = ref(false);
const analysisInfoVisible3 = ref(false);
const progress1 = ref(0);
const progress2 = ref(0);
const progress3 = ref(0);
const progress4 = ref(0);
const progress5 = ref(0);
const progress6 = ref(0);
const progress7 = ref(0);
const progress8 = ref(0);
const progress9 = ref(0);

const progress__tabs_item1 = ref(null);
const progress__tabs_item2 = ref(null);
const progress__tabs_item3 = ref(null);

const progressArray = [12, 33, 71, 79, 89, 100];
const progressArray1 = [12, 44, 66, 92, 100];

const dynamicAnalysisText1 = async () => {
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress1.value = item;
  }
  for (const item of progressArray1) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress2.value = item;
  }
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress3.value = item;
  }
  await new Promise((resolve) => setTimeout(resolve, 300));
  progress__tabs_item1.value.classList.toggle("active");
  progress__tabs_item2.value.classList.toggle("active");
  analysisInfoVisible1.value = false;
  analysisInfoVisible2.value = true;
};
const dynamicAnalysisText2 = async () => {
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress4.value = item;
  }
  for (const item of progressArray1) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress5.value = item;
  }
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress6.value = item;
  }
  await new Promise((resolve) => setTimeout(resolve, 300));
  progress__tabs_item2.value.classList.toggle("active");
  progress__tabs_item3.value.classList.toggle("active");
  analysisInfoVisible2.value = false;
  analysisInfoVisible3.value = true;
};
const dynamicAnalysisText3 = async () => {
  console.log("dynamicAnalysisText3");
  for (const item of progressArray1) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress7.value = item;
  }
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress8.value = item;
  }
  for (const item of progressArray) {
    await new Promise((resolve) => setTimeout(resolve, 100));
    progress9.value = item;
  }
  await new Promise((resolve) => setTimeout(resolve, 300));
};

const bazijpGenPanVisible = ref(true);

const textVisibleObject = ref({
  yearTextVisible: false,
  monthTextVisible: false,
  dayTextVisible: false,
  hourTextVisible: false,
});

const analysisAfter = ref(false);

// 天干数组
const heavenlyStems = [
  "甲",
  "乙",
  "丙",
  "丁",
  "戊",
  "己",
  "庚",
  "辛",
  "壬",
  "癸",
];
// 地支数组
const earthlyBranches = [
  "子",
  "丑",
  "寅",
  "卯",
  "辰",
  "巳",
  "午",
  "未",
  "申",
  "酉",
  "戌",
  "亥",
];
// 计算干支年
const calculateYearBranch = (yearValue) => {
  if (isNaN(yearValue) || yearValue === 0) return "无效年份";
  // console.log(yearValue)
  // 干支纪年法以立春为分界，简化处理：年份减 3 后取余
  const stemIndex = (yearValue - 4) % 10;
  const branchIndex = (yearValue - 4) % 12;
  console.log(yearValue, stemIndex, branchIndex);
  console.log(
    "calculateYearBranch",
    stemIndex - 1 >= 0 ? stemIndex - 1 : stemIndex + 10,
    branchIndex - 1 >= 0 ? branchIndex - 1 : branchIndex - 1 + 12
  );

  return `${heavenlyStems[stemIndex >= 0 ? stemIndex : stemIndex + 10]}${
    earthlyBranches[branchIndex >= 0 ? branchIndex : branchIndex + 12]
  }`;
};

const almanacInfo = async (year, month, day) => {
  const query = `${year}-${month}-${day}`;
  console.log(query);

  // axios.get("https://www.36jxs.com/api/Commonweal/almanac?sun=" + query).then(res => {
  //   console.log(res.data.data)
  //   selectTimeInfo.value.TianGanDiZhiYear = res.data.data.TianGanDiZhiYear
  //   selectTimeInfo.value.TianGanDiZhiMonth = res.data.data.TianGanDiZhiMonth
  //   selectTimeInfo.value.TianGanDiZhiDay = res.data.data.TianGanDiZhiDay
  // })

  axios.get("http://lcoalhost:8080/almanac?time=" + query).then((res) => {
    console.log(res.data.data);
    selectTimeInfo.value.TianGanDiZhiYear = res.data.data.TianGanDiZhiYear;
    selectTimeInfo.value.TianGanDiZhiMonth = res.data.data.TianGanDiZhiMonth;
    selectTimeInfo.value.TianGanDiZhiDay = res.data.data.TianGanDiZhiDay;
  });
  await nextTick();
};
// 农历转公历
const convertDate = (year, month, day) => {
  try {
    // 示例：农历转公历
    const solarDate = calendar.lunar2solar(year, month, day);
    // 创建公历 Date 对象
    const resultDate = {
      year: solarDate.cYear,
      month: solarDate.cMonth,
      day: solarDate.cDay,
    };
    return resultDate;
  } catch (error) {
    console.log("日期转换失败：", error);
    return null;
  }
};

// 计算干支月 (简化版，不考虑节气)
// const calculateMonthBranch = (yearValue, monthValue) => {
//   if (isNaN(monthValue) || monthValue < 1 || monthValue > 12) return '无效月份';
//   // 年干推算月干
//   const yearStemIndex = (yearValue - 4) % 10;
//   // const yearStemIndex = (yearValue - 3) % 10;
//   const monthStemBase = [0, 2, 4, 6, 8, 0, 2, 4, 6, 8]; // 年干为甲己 - 丙开始，乙庚 - 戊开始...
//   const monthStemIndex = (monthStemBase[yearStemIndex  >= 0 ? yearStemIndex : yearStemIndex + 10] + monthValue - 1) % 10;
//   // 固定的月支 (正月为寅)
//   // const monthBranchIndex = (monthValue + 1) % 12;
//   const monthBranchIndex = (monthValue + 1) % 12;
//   console.log("月",monthBranchIndex)

//   return `${heavenlyStems[monthStemIndex]}${earthlyBranches[monthBranchIndex]}`;
// };
// 计算干支月 (考虑节气，支持公历转农历)
// 计算年、月、日的干支（含正确日干支计算）
const calculateStemBranch = (year, month, day) => {
  if (
    isNaN(month) ||
    month < 1 ||
    month > 12 ||
    isNaN(day) ||
    day < 1 ||
    day > 31
  ) {
    return { error: "无效日期" };
  }

  // 天干地支数组（甲=0, 乙=1,...癸=9；子=0, 丑=1,...亥=11）
  const heavenlyStems = [
    "甲",
    "乙",
    "丙",
    "丁",
    "戊",
    "己",
    "庚",
    "辛",
    "壬",
    "癸",
  ];
  const earthlyBranches = [
    "子",
    "丑",
    "寅",
    "卯",
    "辰",
    "巳",
    "午",
    "未",
    "申",
    "酉",
    "戌",
    "亥",
  ];

  // ===== 计算年干支 =====
  const calculateYearBranch = (y) => {
    const stem = (y - 4) % 10;
    const branch = (y - 4) % 12;
    return `${heavenlyStems[stem >= 0 ? stem : stem + 10]}${
      earthlyBranches[branch >= 0 ? branch : branch + 12]
    }`;
  };

  // ===== 计算月干支（考虑节气） =====
  const calculateMonthBranch = (y, m, d) => {
    // 节气简化计算（实际应使用天文算法）
    const jieqiDays = [5, 4, 5, 4, 5, 5, 7, 7, 8, 7, 7, 6]; // 各月节气日期（简化）
    const isAfterJieqi = d >= jieqiDays[m - 1];

    let monthBranchIndex = isAfterJieqi ? (m + 1) % 12 : m % 12;
    if (m === 1 && !isAfterJieqi) {
      monthBranchIndex = 1; // 丑月
      y--;
    }

    const yearStem = (y - 4) % 10;
    const monthStemBase = [3, 5, 7, 9, 1, 3, 5, 7, 9, 1]; // 五虎遁起月
    const stemIndex =
      (monthStemBase[yearStem >= 0 ? yearStem : yearStem + 10] +
        (monthBranchIndex - 2 >= 0
          ? monthBranchIndex - 2
          : monthBranchIndex + 10)) %
      10;

    return `${heavenlyStems[stemIndex]}${earthlyBranches[monthBranchIndex]}`;
  };

  // ===== 计算日干支（关键修正部分） =====
  const calculateDayBranch = (y, m, d) => {
    // 基准日：1900 年 1 月 1 日为戊午日（天 5, 地 7）
    const baseStemIndex = 5; // 戊
    const baseBranchIndex = 7; // 午

    // 计算总天数（含闰年和每月实际天数）
    let totalDays = 0;
    // 计算 1900 到 y-1 年的总天数
    for (let year = 1900; year < y; year++) {
      totalDays +=
        (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365;
    }
    // 计算当年1月到m-1月的天数
    for (let month = 1; month < m; month++) {
      const isLeap =
        ((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0) && month === 2;
      totalDays += [
        31,
        isLeap ? 29 : 28,
        31,
        30,
        31,
        30,
        31,
        31,
        30,
        31,
        30,
        31,
      ][month - 1];
    }
    totalDays += d; // 加上当月天数

    // 计算干支索引（60甲子循环）
    const stemIndex = (baseStemIndex + totalDays) % 10;
    const branchIndex = (baseBranchIndex + totalDays) % 12;

    return `${heavenlyStems[stemIndex >= 0 ? stemIndex : stemIndex + 10]}${
      earthlyBranches[branchIndex >= 0 ? branchIndex : branchIndex + 12]
    }`;
  };

  // ===== 返回结果 =====
  return {
    year: calculateYearBranch(year),
    month: calculateMonthBranch(year, month, day),
    day: calculateDayBranch(year, month, day),
    date: `${year}年${month}月${day}日`,
  };
};

// // 测试 1995 年 11 月 8 日
// console.log(calculateStemBranch(1995, 11, 8));
// // 输出：{ year: '乙亥', month: '丁亥', day: '癸卯', date: '1995 年 11 月 8 日' }

// 计算干支日 (简化版，使用蔡氏公式计算)
const calculateDayBranch = (yearValue, monthValue, dayValue) => {
  if (isNaN(dayValue) || dayValue < 1 || dayValue > 31) return "无效日期";

  // 蔡氏公式计算干支日
  let y = yearValue;
  let m = monthValue;
  if (m < 3) {
    m += 12;
    y--;
  }
  let c = Math.floor(y / 100);
  y = y % 100;

  // 计算日干支的序数
  const d =
    Math.floor(2.6 * m - 5.39) +
    y +
    Math.floor(y / 4) +
    Math.floor(c / 4) -
    2 * c +
    dayValue;
  const stemIndex = d % 10;
  const branchIndex = d % 12;

  return `${heavenlyStems[stemIndex >= 0 ? stemIndex : stemIndex + 10]}${
    earthlyBranches[branchIndex >= 0 ? branchIndex : branchIndex + 12]
  }`;
};

// 计算干支时
// 计算干支时
const calculateHourBranch = (dayStem, hourValue) => {
  if (isNaN(hourValue) || hourValue < 0 || hourValue >= 24) return "无效小时";

  // 查找日天干的索引
  const dayStemIndex = heavenlyStems.findIndex((s) => s === dayStem[0]);
  if (dayStemIndex === -1) return "无法计算";

  // 时支计算 (23-1 为子时，1-3 为丑时...)
  const hourBranchIndex = Math.floor((hourValue + 1) / 2) % 12;

  // 时干计算 (甲己还加甲，乙庚丙作初...)
  const hourStemBase = [0, 2, 4, 6, 8, 0, 2, 4, 6, 8];
  const hourStemIndex = (hourStemBase[dayStemIndex] + hourBranchIndex) % 10;

  return `${heavenlyStems[hourStemIndex]}${earthlyBranches[hourBranchIndex]}`;
};

const bazi_pan_ref = ref(null);
const bazi_pan_gan_ref = ref(null);

const ele = ref(0);
const ele1 = ref(0);

const handleYear = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  // let gen_zhi = calculateYearBranch(selectTimeInfo.value.year)
  let gen_zhi = selectTimeInfo.value.TianGanDiZhiYear;
  let gen = gen_zhi.substring(0, 1);
  let genIndex = heavenlyStems.findIndex((item) => item === gen);
  let zhi = gen_zhi.substring(1, 2);
  let zhiIndex = earthlyBranches.findIndex((item) => item === zhi);
  firstDeg.value = 36 * (heavenlyStems.length - genIndex);
  secondDeg.value = -30 * zhiIndex;
  await new Promise((resolve) => setTimeout(resolve, 900));
  ele.value = zhiIndex + 1;
  ele1.value = genIndex + 1;
  console.log(zhiIndex + 1, genIndex + 1);
  let element = bazi_pan_ref.value.querySelector(".pan__zhi_" + (zhiIndex + 1));
  element.classList.toggle("active");
  let element1 = bazi_pan_gan_ref.value.querySelector(
    ".pan__gan" + (genIndex + 1)
  );
  element1.classList.toggle("active");
  textVisibleObject.value.yearTextVisible = true;
};

const handleMonth = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  // let gen_zhi = calculateMonthBranch(selectTimeInfo.value.year, selectTimeInfo.value.month)
  let gen_zhi = selectTimeInfo.value.TianGanDiZhiMonth;
  let gen = gen_zhi.substring(0, 1);
  let genIndex = heavenlyStems.findIndex((item) => item === gen);
  let zhi = gen_zhi.substring(1, 2);
  let zhiIndex = earthlyBranches.findIndex((item) => item === zhi);
  firstDeg.value = 36 * (heavenlyStems.length - genIndex);
  secondDeg.value = -30 * zhiIndex;
  await new Promise((resolve) => setTimeout(resolve, 900));
  ele.value = zhiIndex + 1;
  ele1.value = genIndex + 1;
  let element = bazi_pan_ref.value.querySelector(".pan__zhi_" + (zhiIndex + 1));
  element.classList.toggle("active");
  let element1 = bazi_pan_gan_ref.value.querySelector(
    ".pan__gan" + (genIndex + 1)
  );
  element1.classList.toggle("active");
  textVisibleObject.value.monthTextVisible = true;
};

const handleDay = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  // let gen_zhi = calculateDayBranch(selectTimeInfo.value.year, selectTimeInfo.value.month, selectTimeInfo.value.day)
  let gen_zhi = selectTimeInfo.value.TianGanDiZhiDay;
  let gen = gen_zhi.substring(0, 1);
  let genIndex = heavenlyStems.findIndex((item) => item === gen);
  let zhi = gen_zhi.substring(1, 2);
  let zhiIndex = earthlyBranches.findIndex((item) => item === zhi);
  firstDeg.value = 36 * (heavenlyStems.length - genIndex);
  secondDeg.value = -30 * zhiIndex;
  await new Promise((resolve) => setTimeout(resolve, 900));
  ele.value = zhiIndex + 1;
  ele1.value = genIndex + 1;
  let element = bazi_pan_ref.value.querySelector(".pan__zhi_" + (zhiIndex + 1));
  element.classList.toggle("active");
  let element1 = bazi_pan_gan_ref.value.querySelector(
    ".pan__gan" + (genIndex + 1)
  );
  element1.classList.toggle("active");
  textVisibleObject.value.dayTextVisible = true;
};
const handleHour = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  // calculateHourBranch(calculateDayBranch(selectTimeInfo.value.year, selectTimeInfo.value.month, selectTimeInfo.value.day),
  //               selectTimeInfo.value.hour)
  let gen_zhi = calculateHourBranch(
    calculateDayBranch(
      selectTimeInfo.value.year,
      selectTimeInfo.value.month,
      selectTimeInfo.value.day
    ),
    selectTimeInfo.value.hour
  );
  let gen = gen_zhi.substring(0, 1);
  let genIndex = heavenlyStems.findIndex((item) => item === gen);
  let zhi = gen_zhi.substring(1, 2);
  let zhiIndex = earthlyBranches.findIndex((item) => item === zhi);
  firstDeg.value = 36 * (heavenlyStems.length - genIndex);
  secondDeg.value = -30 * zhiIndex;
  await new Promise((resolve) => setTimeout(resolve, 900));
  ele.value = zhiIndex + 1;
  ele1.value = genIndex + 1;
  let element = bazi_pan_ref.value.querySelector(".pan__zhi_" + (zhiIndex + 1));
  element.classList.toggle("active");
  let element1 = bazi_pan_gan_ref.value.querySelector(
    ".pan__gan" + (genIndex + 1)
  );
  element1.classList.toggle("active");
  textVisibleObject.value.hourTextVisible = true;
};

const selectNongliInfo = ref({});

const orderNo = ref("");

onMounted(async () => {
  const query = route.query;
  console.log(query);
  selectTimeInfo.value = { ...query };
  // time = query.time.substring(3,7)
  let timeJson = JSON.parse(query.time);
  if (query.lcalendarSelect == "0") {
    selectTimeInfo.value.year = timeJson.year;
    selectTimeInfo.value.month = timeJson.month;
    selectTimeInfo.value.day = timeJson.day;
  } else {
    selectNongliInfo.value = { ...timeJson };
    selectTimeInfo.value.nongliInfo = selectNongliInfo.value;
    let gongliRes = convertDate(timeJson.year, timeJson.month, timeJson.day);
    selectTimeInfo.value.year = gongliRes.year;
    selectTimeInfo.value.month = gongliRes.month;
    selectTimeInfo.value.day = gongliRes.day;
  }
  const data = {
    userName: selectTimeInfo.value.userName,
    sex: selectTimeInfo.value.sex,
    userInfo: JSON.stringify(selectTimeInfo.value),
  };
  axios.post("http://www.yuqiaoart.top/api/order/create", data).then((res) => {
    orderNo.value = res.data.data.orderNo;
  });
  // almanacInfo(selectTimeInfo.value.year, selectTimeInfo.value.month, selectTimeInfo.value.day)
  // console.log(query.lcalendarSelect == "0")
  if (query.lcalendarSelect == "0") {
    const solarDate = calendar.solar2lunar(
      selectTimeInfo.value.year,
      selectTimeInfo.value.month,
      selectTimeInfo.value.day
    );
    selectTimeInfo.value.TianGanDiZhiYear = solarDate.gzYear;
    selectTimeInfo.value.TianGanDiZhiMonth = solarDate.gzMonth;
    selectTimeInfo.value.TianGanDiZhiDay = solarDate.gzDay;
  } else {
    const solarDate = calendar.lunar2solar(
      selectTimeInfo.value.year,
      selectTimeInfo.value.month,
      selectTimeInfo.value.day
    );
    selectTimeInfo.value.TianGanDiZhiYear = solarDate.gzYear;
    selectTimeInfo.value.TianGanDiZhiMonth = solarDate.gzMonth;
    selectTimeInfo.value.TianGanDiZhiDay = solarDate.gzDay;
  }

  selectTimeInfo.value.hour = timeJson.hour.startTime
    ? timeJson.hour.startTime.substring(1, 2)
    : 0;
  await handleYear();
  await middelFun();
  await handleMonth();
  await middelFun();
  await handleDay();
  await middelFun();
  await handleHour();
  await middelFun();
  bazijpGenPanVisible.value = false;
  analysisAfter.value = true;
  await dynamicAnalysisText1();
  await dynamicAnalysisText2();
  await dynamicAnalysisText3();
  router.push({
    path: "/orderPay",
    query: {
      orderNo: orderNo.value,
    },
  });
});

const middelFun = async () => {
  await new Promise((resolve) => setTimeout(resolve, 300));
  let element = bazi_pan_ref.value.querySelector(".pan__zhi_" + ele.value);
  element.classList.toggle("active");
  console.log(ele1.value);
  let element1 = bazi_pan_gan_ref.value.querySelector(".pan__gan" + ele1.value);
  element1.classList.toggle("active");
};
</script>

<style scoped>
@import url("../assets/index_static/app.css");

.tab-progress__bar i {
  transition: width 0.3s ease;
  /* 添加过渡效果 */
}

.bazijp__header_analysis {
  background-size: 100% auto;
  height: 22.691rem;
  position: relative;
}

.bazijp__pan_analysis {
  position: absolute;
  /* top: -4%; */
  /* right: -44% */
}

.bazijp__pan_analysis img,
.bazijp__pan_analysis {
  width: 17.8153rem;
  height: 17.8153rem;
}

.bazijp__pan_analysis img {
  position: absolute;
}

.bazijp__pan_analysis img:first-child {
  animation: rotate-clockwise 10s linear infinite;
}

.bazijp__pan_analysis img:nth-child(2) {
  animation: rotate-counterclockwise 10s linear infinite;
}

@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes rotate-counterclockwise {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-1turn);
  }
}

.progress_i {
  background-color: rgb(255, 235, 172);
}
</style>
